<script setup lang="ts">
import * as echarts from 'echarts'

import { nextTick, onMounted } from 'vue'

type EChartsOption = echarts.EChartsOption
var option: EChartsOption
option = {
    tooltip: {
        show: true,
        trigger: "axis"
    },
    xAxis: {
        type: 'time',
        axisLabel: {
            show: true,
            color: "rgba(255, 255, 255, 0.6)"
        },
        interval: 24 * 60 * 60 * 1000
    },
    grid: {
        containLabel: true,
        top: '8%',
        bottom: 0,
        left: 0,
        right: 5
    },
    yAxis: {
        type: 'value',
        min: 390,
        axisLabel: {
            show: true,
            color: "rgba(255, 255, 255, 0.6)"
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: "rgba(255, 255, 255, 0.08)"
            }
        }
    },
    series: [
        {
            data: [
                [new Date(2023, 8, 13), 390.5627],
                [new Date(2023, 8, 14), 390.6627],
                [new Date(2023, 8, 15), 390.7627],
                [new Date(2023, 8, 16), 390.6627],
                [new Date(2023, 8, 17), 390.6627],
                [new Date(2023, 8, 18), 390.7627],
                [new Date(2023, 8, 19), 390.8627],
                [new Date(2023, 8, 20), 390.9627],
                [new Date(2023, 8, 21), 390.5627]
            ],
            type: 'line'
        }
    ]
}

const init = () => {
    var chartDom = document.getElementById('simple-line')
    var myChart = echarts.init(chartDom)


    option && myChart.setOption(option)
    window.onresize = function () {
        myChart.resize()
    }
}

onMounted(() => {
    nextTick(() => {
        init()
    })
})
</script>
<template>
    <div id="simple-line" style="width: 9.4667rem;height:4.2667rem; margin: 0 auto;">

    </div>
</template>
<style></style>